// rem布局
function rem(){
    document.documentElement.style.fontSize=document.documentElement.clientWidth/12.42+'px'
}
rem()
window.onresize=rem


$(function(){

    //list轮播
    var list=new Swiper('#mylist',{
        // loop:true,
        onSlideChangeEnd:function(e){
            var index=e.activeIndex
            $('.nav>ul>li').eq(index).addClass('nav-active').siblings().removeClass('nav-active')
        }
    })

    //nav轻击事件
    $('.nav>ul>li').tap(function () {
        var index=$(this).index()
        console.log(index)
        $(this).addClass('nav-active').siblings().removeClass('nav-active')
        list.slideTo(index,1500)
    })

    //滑动事件改变title状态
    

    $('.classify>img').eq(0).tap(function(){
        $('.wrap').show(2000)
    })
    $('.wrap').swipeLeft(function(){
        // $(".wrap").animate({left:-12.42+"rem"},1500);
        $('.wrap').hide()
    })

    //阻止默认touchmove事件
    document.addEventListener("touchmove", function (e) {
        e.preventDefault()
    }, {
        passive: false
    });

    //内容滚动
    var box=new IScroll('#box',{
        probeType: 2 //开启滚动监听，probeType：2  滚动时每隔一定时间触发
    })

    //滑动执行函数
    box.on('scroll',function(){
        Height=$('.refresh').height()
        //上拉刷新
        if(this.y>=Height){
            $('.refresh').html("松开立即释放").addClass('a')
            this.minScrollY = Height
        }

        if(this.y<=box.maxScrollY-Height&&len<=6){
            $('.more').html('松开立即释放').addClass('b')
            var h=this.scrollerHeight-this.wrapperHeight
            box.maxScrollY=-h-Height
        }
    })


    var len=0
    //滑动介绍执行函数
    box.on('scrollEnd',function(){
        if($('.refresh').hasClass('a')){
            $('.refresh').html('leading')
            setTimeout(function(){
                $('.refresh').html('刷新成功')
            },1500)
            setTimeout(function(){
                box.refresh()
                $(".refresh").html("下拉刷新").removeClass("a");
            },2000)
        }

        if ($('.more').hasClass('b')) {
            $('.more').html('leading')
            setTimeout(function () {
                $('.more').html('刷新成功')
            }, 1500)
            setTimeout(function () {
                box.refresh();
                $(".more").html("上拉加载更多").removeClass("b");
                $.ajax({
                    type:'get',
                    url:'json/index.json',
                    success:function(res){
                        len =$('.list ul').eq(0).children('li').length
                        var arr4=res.list2
                        var slist2=''
                            slist2+=`
                                <li>
                                    <img src="${arr4[len].src}" alt="">
                                    <h2>${arr4[len].title}</h2>
                                    <p>${arr4[len].text}</p>
                                    <span>${arr4[len].price}</span> <span>${arr4[len].activity}</span>
                                </li>
                            `,
                            $('.list ul').append(slist2)
                         
                            if(len>=6){
                                $('.more').html('到底了')
                            }else{
                                $('.more').html('刷新成功')
                            }
                            box.refresh()
                    }
                })
            },2000)
        }

       
    })

    // ajax数据渲染
    $.ajax({
        type:'get',
        url:'json/index.json',
        success:function(res){
            //轮播数据渲染
            var arr=res.banner
            var sban=''
            for(var i in arr){
                sban+=`
                    <setion class="swiper-slide"><img src="${arr[i].src}" alt=""></setion>
                `,
                $('#mybanner>section').html(sban)
            }
              //轮播图
            new Swiper('#mybanner',{
                autoplay:3000,
                loop:true,
            })

            //介绍数据渲染
            var arr2=res.nav
            var snav=''
            for(var i in arr2){
                snav+=`
                    <li>
                        <img src="${arr2[i].src}" alt="">
                        <span>${arr2[i].text}</span>
                    </li>
                `,
                $('.introduce>ul').html(snav)
            }


            //限时购数据渲染
            var arr3=res.list
            var slist=''
            for(var i in arr3){
                slist+=`
                    <li>
                        <img src="${arr3[i].src}" alt="">
                        <p><span>${arr3[i].newprice}</span> <del>${arr3[i].oldprice}</del></p>
                    </li>
                `,
                $('.cosmetics>ul').html(slist)
            }

            //商品数据渲染
            var arr4=res.list2
            var slist2=''
            for(var i in arr4){
                if(i>1){
                    break
                }
                slist2+=`
                    <li>
                        <img src="${arr4[i].src}" alt="">
                        <h2>${arr4[i].title}</h2>
                        <p>${arr4[i].text}</p>
                        <span>${arr4[i].price}</span> <span>${arr4[i].activity}</span>
                    </li>
                `,
                $('.list>#mylist>section>section>ul').html(slist2)
                box.refresh()
            }
        },
        error:function(){
            alert(1)
        }
    })
})